'use client'

import React, { useMemo, memo } from 'react'
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd'
import { 
  UserOutlined, 
  TeamOutlined, 
  MenuOutlined, 
  CheckCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from '@ant-design/icons'

// 使用 memo 优化组件，避免不必要的重渲染
const DashboardPage = memo(function DashboardPage() {
  const recentActivities = useMemo(() => [
    { key: '1', user: '张三', action: '登录系统', time: '2024-01-15 10:30:00', status: 'success' },
    { key: '2', user: '李四', action: '创建用户', time: '2024-01-15 10:25:00', status: 'success' },
    { key: '3', user: '王五', action: '更新部门信息', time: '2024-01-15 10:20:00', status: 'success' },
    { key: '4', user: '赵六', action: '删除菜单', time: '2024-01-15 10:15:00', status: 'error' },
  ], [])

  const activityColumns = useMemo(() => [
    { title: '用户', dataIndex: 'user', key: 'user' },
    { title: '操作', dataIndex: 'action', key: 'action' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'success' ? 'green' : 'red'}>
          {status === 'success' ? '成功' : '失败'}
        </Tag>
      ),
    },
  ], [])

  return (
    <div style={{ padding: 24 }}>
      <h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>仪表盘</h1>
      
      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
              suffix={
                <span style={{ fontSize: 14, color: '#52c41a' }}>
                  <ArrowUpOutlined /> 12%
                </span>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="部门数量"
              value={15}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#1890ff' }}
              suffix={
                <span style={{ fontSize: 14, color: '#52c41a' }}>
                  <ArrowUpOutlined /> 8%
                </span>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="菜单数量"
              value={48}
              prefix={<MenuOutlined />}
              valueStyle={{ color: '#722ed1' }}
              suffix={
                <span style={{ fontSize: 14, color: '#ff4d4f' }}>
                  <ArrowDownOutlined /> 3%
                </span>
              }
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="在线用户"
              value={89}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
              suffix={
                <span style={{ fontSize: 14, color: '#52c41a' }}>
                  <ArrowUpOutlined /> 5%
                </span>
              }
            />
          </Card>
        </Col>
      </Row>

      {/* 系统状态和最近活动 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="系统状态" style={{ height: 400 }}>
            <div style={{ marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>CPU使用率</span>
                <span>65%</span>
              </div>
              <Progress percent={65} status="active" />
            </div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>内存使用率</span>
                <span>42%</span>
              </div>
              <Progress percent={42} />
            </div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>磁盘使用率</span>
                <span>78%</span>
              </div>
              <Progress percent={78} status="exception" />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>网络状态</span>
                <span>正常</span>
              </div>
              <Progress percent={100} strokeColor="#52c41a" />
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="最近活动" style={{ height: 400 }}>
            <Table
              columns={activityColumns}
              dataSource={recentActivities}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
})

export default DashboardPage
